<template>
    <div class="RxGrid">
        <div v-for="(row,index) in dataSource" :key="index">
            <slot name="center" :record="row" :index="index"></slot>
        </div>
        <div class="RxGrid-empty" v-if="dataSource.length==0">
            <div v-if="loading">{{i18n('loading','拼命加载中...')}}</div>
            <RxEmptyList v-else></RxEmptyList>
        </div>
        <div v-if="status=='more' && dataSource.length!=0">
            <div class="RxGrid-contentText" @click="more" v-if="!loading">{{ contentText.clickLoadMore }}</div>
            <div class="RxGrid-contentText" v-else>{{ contentText.loading }}</div>
        </div>
        <div class="RxGrid-contentText" v-else-if="dataSource.length!=0">{{ contentText.noMore }}</div>
    </div>
</template>

<script>
import rxAjax from '@/assets/ajax.js';
import Util from '@/js/Util.js'
import RxEmptyList from "@/components/RxEmptyList.vue"

export default {
    name: "RxGrid",
    data() {
        return {
            dataSource: [],
            pageNo: 1,
            total: 0,
            status: 'more',
            loading: true,
            contentText: {
                clickLoadMore:this.i18n('clickLoadMore','点击加载更多'),
                loading:this.i18n('loadingA','加载中'),
                noMore:this.i18n('noMore','没有更多')
            },
        }
    },
    components:{RxEmptyList},
    props: {
        pageSize: {
            type: Number,
            default: 20,//20条一页
        },
        "url": {},//请求api
        "queryParam": {},//筛选参数
        "data":{},//数据
    },
    created() {
        let appId =  uni.getStorageSync("mobileAppId")
        if(appId){
            this.queryParam['Q_APP_ID__S_EQ'] = appId
        }
        this.getInit(true, true)
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"allLang",key);
        },
        /**
         *
         * @param initPage 分页
         * @param merge 拼接数据
         */
        getInit(initPage, merge) {
            if(this.data){
                this.dataSource=Util.deepClone(this.data);
                this.loading = false
                this.status = "noMore"
                return;
            }
            this.loading = true
            if (initPage) {
                this.dataSource = []
                this.pageNo = 1;
            } else {
                let len = this.dataSource.length;
                if (!len) {
                    this.pageNo = 1;
                } else {
                    this.pageNo = Math.ceil(len / this.pageSize) + 1;
                }
            }
            let params = {
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }
            //筛选参数
            if (this.queryParam) {
                params['params'] = this.queryParam
            }
            rxAjax.postJson(this.url, params).then(res => {
                let data = res.result;
                let list = this.dataSource
                this.dataSource = merge ? [...list, ...data.data] : data.data;
                this.total = data.totalCount;
                if (this.dataSource.length == this.total) {
                    this.status = "noMore"
                } else {
                    this.status = "more"
                }
                this.loading = false
            })
        },
        more() {
            this.getInit(false, true)
        }
    },
    watch: {
        queryParam: {
            handler() {
                this.getInit(true, true)
            }
        },
        data: {
            handler() {
                this.getInit(false, false)
            },
            deep: true
        }
    }
}
</script>

<style scoped>
.RxGrid-contentText {
    width: 100%;
    text-align: center;
    height: 3rem;
    line-height: 3rem;
}

.RxGrid-empty {
    height: calc(100vh - 14rem);
    display: flex;
    align-items: center;
    justify-content: center;
}
.empty{
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>
